<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <div class="app-container">
      <!-- 搜索部分 -->
      <el-card
        class="search-card-box"
        shadow="never"
        style="height:80px"
      >
        <el-form
          :inline="true"
          class="demo-form-inline"
        >
          <el-form-item
            label="车辆类型:"
          >
            <el-select
              v-model="params.truckTypeId"
              placeholder="请选择"
              style="width: 280px;"
              clearable
            >
              <el-option
                v-for="item in carTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="车牌号码:">
            <el-input
              v-model="params.licensePlate"
              placeholder="请输入车牌号码"
              style="width: 280px;"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="warning"
              style="width: 90px;"
              @click="searchFn"
            >搜索</el-button>
            <el-button
              style="width: 90px;"
              plain
              @click="resetFn"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 筛选 -->
      <TabChange
        :default-active-index="2"
        :is-show-num="true"
        :setting-list="[
          {
            value: 2,
            label: '全部',
            num: allNum
          },
          {
            value: 1,
            label: '可用',
            num: canNum
          },
          {
            value: 0,
            label: '禁用',
            num: noNum
          },
        ]"
        @tabChange="tabChange"
      ></TabChange>
      <!-- 列表 -->
      <el-card
        v-loading="loading"
        class="table-box-card"
        shadow="never"
        :body-style="{padding:'28px'}"
        style="margin-top:20px"
      >
        <el-form>
          <el-form-item>
            <el-button
              type="warning"
              @click="isShow=true"
            >新增车辆</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          style="width: 100%;"
          stripe
        >
          <el-table-column
            type="index"
            label="序号"
            width="60"
          />
          <el-table-column
            prop="licensePlate"
            label="车牌号码"
            width="115"
          />
          <el-table-column
            prop="truckTypeName"
            label="车辆类型"
            width="120"
          />
          <el-table-column
            prop="driverNum"
            label="司机数量"
            width="110"
          />
          <el-table-column
            prop="workStatus"
            label="车辆状态"
            width="110"
          >
            <template #default="{row}">
              <span v-if="row.workStatus===1"><span class="green"></span>可用</span>
              <span v-else-if="row.workStatus===0"><span class="red"></span>停用</span>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="deviceGpsId"
            label="GPS设备ID"
            width="170"
          />
          <el-table-column
            prop="allowableLoad"
            label="实载重量（T）"
            width="160"
          />
          <el-table-column
            prop="allowableVolume"
            label="实载体积（立方）"
            width="160"
          />
          <el-table-column
            align="center"
            label="操作"
          >
            <template #default="{row}">
              <el-button
                type="text"
                size="small"
                style="color: #41a9fe;"
                @click="$router.push(`/transit/vehicle-detail?id=${row.id}`)"
              >查看详情</el-button>
              <el-divider direction="vertical" />
              <el-button
                type="text"
                size="small"
              >
                <span
                  v-if="row.workStatus === 0"
                  @click="openStart(row)"
                >启用</span>
                <span
                  v-else
                  @click="openStop(row)"
                >停用</span>
              </el-button>
              <el-divider direction="vertical" />
              <el-button
                type="text"
                size="small"
                style="color: #41a9fe;"
                @click="setDriver(row)"
              >配置司机</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          :current-page="params.page"
          :total="total"
          :page-size="params.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- 弹窗 -->
        <el-dialog
          title="新增车辆"
          :visible.sync="isShow"
          width="600px"
          style="border-radius: 10px;"
          @close="closeFn"
        >
          <el-form
            ref="fm"
            label-width="130px"
            :model="params"
            :rules="rules"
          >
            <el-form-item
              label="车辆类型"
              prop="truckTypeId"
            >
              <el-select
                v-model="params.truckTypeId"
                placeholder="请选择"
                style="width: 380px;"
              >
                <el-option
                  v-for="item in carTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="车牌号码"
              prop="licensePlate"
            >
              <el-input
                v-model="params.licensePlate"
                autocomplete="off"
                style="width: 380px;"
                placeholder="请输入车牌号码"
              />
            </el-form-item>
            <el-form-item
              label="GPS设备ID"
              prop="deviceGpsId"
            >
              <el-input
                v-model="params.deviceGpsId"
                autocomplete="off"
                style="width: 380px;"
                placeholder="请输入GPS设备ID"
              />
            </el-form-item>

          </el-form>
          <div
            slot="footer"
            style="display: flex; justify-content: center; width: 100%;"
          >
            <el-button
              type="warning"
              @click="confirm"
            >确 认</el-button>
            <el-button @click="closeFn">取 消</el-button>
          </div>
        </el-dialog>
      </el-card>
      <!-- 司机 -->
      <ArrangeDriver
        ref="driverFm"
        :title-info="titleInfo"
        :form-base-ad="formBaseAd"
        :car-modal-info="carModalInfo"
        :drivers-list="driversList"
      />
    </div>
  </div>
</template>
<script>
import { getCarTypeList, truckList, truckTypeAdd, truckStatusUse, truckStatusNoUse, unBindDriverList } from '@/api/transit'
import ArrangeDriver from '@/views/transit/components/arrange-driver.vue'
import TabChange from '@/components/TabChange'
export default {
  name: 'Vehicle',
  components: {
    TabChange, ArrangeDriver
  },
  data() {
    return {
      carTypeList: [],
      tableData: [],
      params: {
        page: 1,
        pageSize: 10,
        workStatus: null,
        truckTypeId: null,
        licensePlate: null,
        deviceGpsId: null
      },
      total: 0,
      allNum: 0,
      canNum: 0,
      noNum: 0,
      loading: true,
      isShow: false,
      rules: {
        truckTypeId: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' }
        ],
        licensePlate: [
          { required: true, message: '车牌号码不能为空', trigger: 'blur' },
          { pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]$/, message: '请输入正确格式的车牌号', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: 'GPS设备ID不能为空', trigger: 'blur' }
        ]
      },
      titleInfo: { text: '配置司机' },
      formBaseAd: {},
      carModalInfo: {},
      driversList: []
    }
  },
  async created() {
    this.getCarTypeList()
    this.useNum()
    this.truckList()
    this.getDriver()
  },
  methods: {
    // 获取司机列表
    async getDriver() {
      const res = await unBindDriverList()
      console.log(res)
      this.driversList = res.data
    },
    // 下拉车辆类型
    async getCarTypeList() {
      const { data } = await getCarTypeList()
      this.carTypeList = data
    },
    // 获取车辆分页数据
    async truckList() {
      const { data } = await truckList(this.params)
      this.tableData = data.items
      this.total = Number(data.counts)
      this.loading = false
    },
    // 获取数量
    async useNum() {
      const res1 = await truckList({ page: 1,
        pageSize: 10, workStatus: null })
      this.allNum = res1.data.counts
      const res2 = await truckList({ page: 1,
        pageSize: 10, workStatus: 1 })
      this.canNum = res2.data.counts
      const res3 = await truckList({ page: 1,
        pageSize: 10, workStatus: 0 })
      this.noNum = res3.data.counts
    },
    // 改变每页条数
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.params.page = 1
      this.truckList()
      this.loading = true
    },
    // 改变页数
    handleCurrentChange(page) {
      this.params.page = page
      this.truckList()
      this.loading = true
    },
    // 切换
    tabChange(val) {
      // console.log(val)
      if (val === 2) {
        this.params.workStatus = null
        this.truckList()
      } else {
        this.params.workStatus = val
        this.truckList()
      }
    },
    // 查询
    searchFn() {
      this.truckList()
      this.loading = true
    },
    // 重置
    resetFn() {
      this.params = {
        page: 1,
        pageSize: 10,
        workStatus: null,
        truckTypeId: null,
        licensePlate: null
      }
      this.truckList()
    },
    // 关闭
    closeFn() {
      this.isShow = false
      this.$refs.fm.resetFields()
    },
    // 确认提交
    async confirm() {
      try {
        await this.$refs.fm.validate()
        const { truckTypeId, licensePlate, deviceGpsId } = this.params
        const res = await truckTypeAdd({ truckTypeId,
          licensePlate,
          deviceGpsId })
        if (res.code === 200) {
          this.$message.success('新增车辆成功')
          this.params = {
            page: 1,
            pageSize: 10,
            workStatus: null
          }
          this.truckList()
        } else {
          this.$message.error('车辆已存在')
        }
        this.closeFn()
      } catch (error) {
        console.log(error)
      }
    },
    // 打开
    openStart(row) {
      // console.log(row)
      this.$confirm(
        '确定要启用吗？车辆启用需满足以下条件:<br> 1车辆信息已完善 &emsp;&emsp;&emsp;&emsp;2 绑定司机>=2,且有排班',
        '车辆启用',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          const res = await truckStatusUse(row.id)
          // console.log(res)
          if (res.code === '200') {
            this.$message({
              type: 'success',
              message: '车辆启用成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    openStop(row) {
      this.$confirm(
        '确定要停用吗？车辆启用需满足以下条件:<br> 1车辆当前无运输任务 &emsp;&emsp;&emsp;&emsp;2 车辆无关联运输线路 <br> 注：停用后司机将自动解除绑定',
        '停用',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          const res = await truckStatusNoUse(row.id)
          // console.log(res)
          if (res.code === '200') {
            this.$message({
              type: 'success',
              message: '车辆停用成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 配置司机
    setDriver(row) {
      this.carModalInfo = row
      console.log(row)
      this.$confirm(`配置司机需满足以下条件:<br>1车辆信息已完善 &emsp; &emsp; &emsp;2车辆无未完成运输任务`, '车辆配置', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
      // 子组件
        this.$refs.driverFm.dialogFormVisible = true
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.vehicle ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  ::v-deep .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style>
  .startconfirm{
    width: 481px;

    }
    .startconfirm .el-message-box__header{
      padding-bottom: 4px;
    }
    .startconfirm .el-message-box__container{
      margin-bottom: 15px;
    }
    .confirm .el-message-box__status.el-icon-warning{
      left: 70px;
    }
    .confirm.el-message-box__title{
      font-size: 16px;
    }
    .confirm .el-message-box__message p {
      color: #F92D2D;
      margin-top: 5px;
    }
    .confirm .el-message-box__btns{
      text-align: center;
      margin-top: 10px;
    }
</style>

<style lang="scss" scoped>
::v-deep label {
  font-weight: normal;
}
.search-card-box {
  .el-form-item{
    padding: 0 30px;
  }
}
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 0 0 40px;
}
.green {
  height: 6px;
  width: 6px;
  background-color: #1dc779;
  display: inline-block;
  border-radius: 50%;
  margin: 0 5px 1px 0;
  text-align: center;
}
.red {
  height: 6px;
  width: 6px;
  background-color: #e15536;
  display: inline-block;
  border-radius: 50%;
  margin: 0 5px 1px 0;
  text-align: center;
}
</style>
